<template>
	<view class="page-form-group-image uni-padding-wrap">
		<view class="form-group">
			<view class="image-wrap" @tap="changeValue">
				<image :src="options.value" mode="aspectFill" class="image"></image>
				<view class="mask" :style="{height: maskHeight}"></view>
				<view class="progress-wrap">
					<text class="progress">{{ progressText }}</text>
				</view>
			</view>
		</view>
		<view class="submit form-group">
			<button type="primary" class="btn-submit" @tap="save">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				focus: false,
				progress: 0,
				progressText: "",
				maskHeight: "0%",
				imageFile: null,
				options: {},
				urlRemote: "",
			}
		},
		onLoad(options) {
			this.options = Object.assign({}, this.options, options)
			if (this.options.page_title) {
				uni.setNavigationBarTitle({
					title: this.options.page_title
				})
			}
			this.focus = true
		},
		methods: {
			changeValue(e) {
				console.log(e)
				var self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ["original"],
					sourceType: ['album'],
					async success(res) {
						console.log("success: ", res)
						self.options.value = res.tempFilePaths[0]
						let file = res.tempFiles[0]
						let uploadTokenRes = await self.$api.uploadTokenCloudinary()
						if (uploadTokenRes.ret != 0) {
							uni.showToast({
								title: uploadTokenRes.msg
							})
							return
						}
						console.log('uploadTokenRes: ', uploadTokenRes)
						let upload_task = uni.uploadFile({
							url: uploadTokenRes.data.upload_url,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'signature': uploadTokenRes.data.signature,
								'timestamp': uploadTokenRes.data.timestamp,
								'api_key': uploadTokenRes.data.api_key,
							},
							success(res) {
								let data = JSON.parse(res.data)
								console.log(data)
								if (data.error) {
									uni.showToast({
										title: data.error
									})
									self.progress = 0
									self.maskHeight = "100%"
									self.progressText = "fail"
								} else {
									self.progress = 100
									self.maskHeight = "0%"
									self.progressText = ""
									self.urlRemote = data.secure_url
								}
								
							},
							fail(res) {
								console.log("upload fail: ", res)
								self.progress = 0
								self.maskHeight = "100%"
								self.progressText = "fail"
							}
						})
						upload_task.onProgressUpdate((res) => {
							self.progress = res.progress
							self.maskHeight = (100 - res.progress) + "%"
							self.progressText = res.progress + "%"
						})
					},
					fail(res) {
						console.log("chooseImage fail: ", res)
					}
				})
			},
			save(e) {
				console.log(e)
				if (this.progress > 0 && this.progress < 100) {
					uni.showToast({
						title: '上传中...',
						icon: 'none'
					})
					return
				}
				this.$store.commit('setNewAvatar', this.urlRemote ? this.urlRemote : null)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
.page-form-group-image {
	.form-group {
		display: flex;
		margin: 20rpx 0;
		justify-content: center;
		.image-wrap {
			width: 200rpx;
			height: 200rpx;
			position: relative;
			.image {
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
			.mask, .progress-wrap {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
			}
			.mask {
				background-color: #000;
				opacity: 0.5;
			}
			.progress-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				.progress {
					color: white;
					font-size: 40rpx;
					font-weight: bold;
				}
			}
			
		}
		.btn-submit {
			width: 100%;
		}
	}
}
</style>
